<template>
  <div class="bor outview">
    <div class="fr bor" style="width: 100%;height: 15%">
      <div style="width: 25%" class=" fd center itemcenter bc-d color-w fw">
        <div class="fs35">爱陪共享科技</div>
        <div class="fs25">400-992-0993</div>
      </div>
      <div class="fr bor itemcenter sa fs20 c-dimgrey" style="width:75%">
        <div> 体验机构：{{this.$store.getters.getOrganizationList[this.$store.getters.getUserPresentOrganization].organizationName}}</div>
        <div class="fr">
          <div>角色:</div>
          <div style="color: red">{{this.$store.getters.getmMassageName[this.$store.getters.getMassageNum]}}</div>

        </div>
        <div>{{date.ymd}}</div>
        <div>{{date.hms}}</div>
      </div>
      <!--<div>时间:{{data}}</div>-->
    </div>
    <div class="fr between bor " style="width: 100%;height: 85%">
      <div style="width: 25%;height: 100%" class="bor fs15">
        <div style="height: 90%;width: 100%" class="fd">
          <template v-for="(items,index) in orderDetails">
            <div :class="['f1 fd center ','color-w',index%2==0?'bc-grey':'bg-dimgrey']"
                 v-if="showOrderLength>=index+1">
            <div style="margin-left: 10px;margin-right: 10px">
              <div class="fr between">
                <!--<div>锁号：{{items.equipment}}（<span :class="[items.state===2?'c-o':(items.isOvertime?'c-r':'c-g')]">{{items.state===2?'已结束':(items.isOvertime?'已超时':'使用中')}}</span>）</div>-->
                <div >锁号：{{items.equipment}}（<span class="c-r">{{items.state===2?'已结束':(items.isOvertime?'已超时':'使用中')}}</span>）</div>
                <div >租用模式：<span>{{items.mode}}</span></div>
              </div>
              <div  class="fr between ">
                <div>订单金额：{{items.orderAmount}}元</div>
                <div><span :class="[items.isOvertime?'dan':(items.state==1?'war':'succ')]">{{items.isOvertime?'超时已扣押金':(items.state==1?'押金':'已退押金')}}</span>：<span>{{items.deposit}}元</span></div>

              </div>
              <div>手机号码：{{items.userPhone}}</div>
              <div>下单时间：{{items.orderTime}}</div>
              <div>到期时间：{{items.expireDate}}</div>


              <div>所在位置：{{items.place}}</div>
            </div>
            </div>
          </template>

        </div>
        <div style="height: 10%" class="bc-grey fr center itemcenter color-w">

          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage1"

            :page-size="1"
            layout=" prev, pager, next"
            :total="this.showOrderLength">
          </el-pagination>


        </div>
      </div>
      <div style="width: 75%;height: 100%" class="bor fr center  color-bl">
        <router-view></router-view>
        <!--<div class="botton fr center" v-show=setOrientationHidden><el-button type="success" @click="SetOrganization">切换机构</el-button></div>-->
      </div>
    </div>

  </div>

</template>

<script>
  // import '../assets/icon/icon/iconfont.css'
  import  ApiMixin from '../assets/js/api'
  import  UtilsMixin from '../assets/js/utils'
  export default {
    name: "home",
    data() {
      return {
        page:"1",
        date: {
          ymd: '',
          hms: '',
          // message:this.$store.getters.getMassageNum

        },
        currentPage1: 1,
        showOrderLength: 4,//页数

        orderDetails: [
          {equipment: '', userPhone: '', mode: '', state: '',orderTime:'',place:'',expireDate:'',deposit:'',orderAmount:'',isOvertime:false},
          {equipment: '', userPhone: '', mode: '', state: '',orderTime:'',place:'',expireDate:'',deposit:'',orderAmount:'',isOvertime:false},
          {equipment: '', userPhone: '', mode: '', state: '',orderTime:'',place:'',expireDate:'',deposit:'',orderAmount:'',isOvertime:false},
          {equipment: '', userPhone: '', mode: '', state: '',orderTime:'',place:'',expireDate:'',deposit:'',orderAmount:'',isOvertime:false},

        ],
        SetReturnHeddin: false,
      }
    },

    mounted() {
      let arr = new Array("日", "一", "二", "三", "四", "五", "六")
      let date, year, month, day, hours, minutes, seconds, week
    this.timer2=setInterval(()=>{
      this.getList()
    },5000)
      this.timer = setInterval(() => {
        date = new Date();
        year = date.getFullYear();
        month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        week = arr[date.getDay()]
        this.date.ymd = year + "年" + month + "月" + day + "日 " + ' 周' + week
        this.date.hms = hours + ":" + minutes + ":" + seconds
        // this.data = year + "年" + month + "月" + day + "日 " + hours + ":" + minutes + ":" + seconds + '周' + week;
      }, 1000)
    },
    beforeDestroy() {
      if (this.timer) {
        clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器

      }
      if (this.timer2) {
        clearInterval(this.timer2); // 在Vue实例销毁前，清除我们的定时器

      }
    },
    methods: {
      getList(){
        const  params={
          page: this.page,
          organizationId: '5bb57712f41f00691c0c8d70',
          status: '1',
          rows:'4'
        }
        this.getOrderList(params).then((res)=>{
          // console.log(res.data.rows)
          res.data.rows.forEach((res,index)=>{
            this.orderDetails[index].isOvertime=false
            // console.log(res)
            // console.log(res.userId.phone.substr(0,3) + "****" + res.userId.phone.substr(7))
            // console.log(res.create)


            this.orderDetails[index].equipment=res.deviceId.deviceCode
            this.orderDetails[index].userPhone=res.userId.phone.substr(0,3) + "****" + res.userId.phone.substr(7)
            this.orderDetails[index].orderTime=this.renderTime(res.create).substr(5)
            // this.orderDetails[index].mode=res.chargeMode
            if(res.chargeMode==='2'){
              this.orderDetails[index].mode='按小时'
            }else  if(res.chargeMode==='0'){
              this.orderDetails[index].mode='按次'
            }else if(res.chargeMode==='1'){
              this.orderDetails[index].mode='按天'
            }
  
            this.orderDetails[index].expireDate=this.renderTime(res.expireDate).substr(5) //到期时间
            // console.log(new Date(res.expireDate))

            if(res.status===1&&new Date(res.expireDate)<new Date()){
              this.orderDetails[index].isOvertime= true
              // console.log('超时')
            }
              this.orderDetails[index].state= res.status

            // console.log('111',new Date(+new Date(res.expireDate))<new Date())


            this.orderDetails[index].deposit=res.deposit //押金
            // orderAmount
            this.orderDetails[index].orderAmount=res.orderAmount
            this.orderDetails[index].place=res.deviceAddress.length>=15?res.deviceAddress.substr(0,15)+'……':res.deviceAddress||'未知位置'
          })
        })
      },
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);

      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.page=val
        this.getList()

      },

    },
    created() {
      this.getList()
      this.$router.push({path: "/ActionList"})
    console.log(window.innerHeight)
      console.log(document.documentElement.clientHeight)
 console.log(window.innerWidth)

    },
    watch: {
      // $route: {
      //   handler: function (val, oldVal) {
      //     // console.log(val.fullPath);
      //     console.log("val.fullPath=='/ActionList'", val.fullPath !== '/ActionList')
      //     if (val.fullPath !== '/ActionList' || val.fullPath == '/') {
      //       this.SetReturnHeddin = true
      //       console.log(this.SetReturnHeddin);
      //     } else {
      //       this.SetReturnHeddin = false
      //       console.log(this.SetReturnHeddin);
      //     }
      //   },
      //   // 深度观察监听
      //   deep: true
      // }
    },
    mixins: [ ApiMixin,UtilsMixin],
  }


</script>

<style scoped>


</style>
